<template>
	<s-layout title="会员购买" :bgStyle="{ color: '#f2f2f2' }">
		<view>
			<!-- <image :src="grade[0].img" mode=""></image> -->
			<!-- 等级 -->
			<view  v-for="(item, index) in stats.grade" :key="index"
			 >				
				<view class="grade" v-if="item.isshow" 	:style="{ backgroundImage: 'url(' + item.imageUrl + ')' }">
				<!-- <image src="../../static/img/buyVIP/goldBg.png" mode=""></image> -->
				<view class="title" :style="{ backgroundImage: 'url(' + item.topimg + ')' , color: item.fontColor}">
					
				</view>
				<view class="center">
					<view class="center_left" :style="{color: item.fontColor}">
						Lv.{{index+1}} {{item.grade}} 
					</view>
					<!-- <view class="diff" :style="{color: item.fontColor}">还差{{item.val}}积分，可升级至{{grade[index+1].grade?grade[index+1].grade:'至尊会员'}} </view> -->
				</view>
				<!-- 进度条 -->
				<view class="progress-bar-container">
					<view class="progress-bar" style="width: 50%;" :style="{backgroundColor: item.fontColor}"></view>
				</view>
				<!-- 积分 -->
				<view class="integral" :style="{color: item.fontColor}">
					<view class="left">
						<image :src="item.icon" mode="" class="icon"></image>
						<!-- <view>{{item.val}}/1000</view> -->
					</view>
					<view class="right">升级会员享受更多权益</view>
				</view>
				<image class="sign" :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
	</s-layout>

</template>

<script setup>
	// import {
	// 	baseUrl
	// } from '@/sheep/config';
	// import Request from 'luch-request';
	import {
		reactive,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const stats = reactive({
		grade: [
		]
	})
	
	async function getVip(){
		let res = await sheep.$api.trade.userLevel({
			vid:sheep.$store('user').userInfo.id
		});
		stats.grade =res.data;
		console.log(res)
	}
	onShow(()=>{
		getVip();
	})
</script>

<style>
	.grade {
		width: 690rpx;
		height: 360rpx;
		border-radius: 30rpx;
		/* border: 1rpx #808080 solid; */
		margin: 16rpx auto;
		background-size: cover;
		/* 背景图片覆盖整个元素区域 */
		background-position: center;
		/* 背景图片居中 */
		position: relative;
	}

	.grade .title {
		width: 160rpx;
		height: 50rpx;
		background-size: cover;
		/* 背景图片覆盖整个元素区域 */
		background-position: center;
		/* 背景图片居中 */
		/* text-align: center; */
		padding-left: 26rpx;
		font-size: 24rpx;
		/* 		position: absolute;
		z-index: 2;
		top: 0;
		left: 0; */
	}

	.grade .sign {
		display: block;
		position: absolute;
		top: 60rpx;
		right: 40rpx;
		width: 180rpx;
		height: 160rpx;
	}

	.grade .center {
		margin-left: 40rpx;
		margin-top: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.diff {
		font-size: 25rpx;
		font-weight: 400;
	}

	.progress-bar-container {
		margin: 100rpx auto 0;
		width: 620rpx;
		background-color: #fff;
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-bar {
		height: 5px;
		background-color: #5cb85c;
		text-align: center;
		line-height: 20px;
		color: white;
		border-radius: 4px;
		transition: width 0.5s ease;
	}

	.integral {
		display: flex;
		margin: 10rpx auto;
		width: 620rpx;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.integral .left {
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.integral .left .icon {
		display: block;
		width: 25rpx;
		height: 25rpx;
		margin-right: 20rpx;
	}
</style>